<template>
	<view>
		
		<view class="venueForm">
			<view>
				<view style="margin-bottom: 20rpx; font-size: 33rpx;color: #444444;font-weight: 600;line-height: 45rpx;"><text class="required">*</text>请上传照片</view>
			</view>
			<view style="display: flex;">
				<view style="width: 200rpx;">
					<u-upload name="coachImg" :fileList="coachImgList" @afterRead="onUpload($event, 'coachImg')"
						@delete="onDelete($event, 'coachImg')" :maxCount="1" width="120" height="120">
						<view class="upload">
							<view class="picture" style="width: 120rpx;height: 120rpx;">
								<image src="../../../../../static/mine/user-circle.png"  style="width: 120rpx;height: 120rpx;"></image>
							</view>
						</view>
					</u-upload>
				</view>
				<view style="font-size: 31rpx;color:#888888;line-height: 50rpx; display: flex;padding-left: 30rpx;align-items: center;">请上传您的照片，建议证件照片尤为最佳</view>
			</view>
		</view>
		<view class="height30 bg-f1f1f1"></view>
		<view  class="venueForm">
			
			<view>
				<view class="form-row" style="display: block;">
					<view class="ftitle"><text class="required">*</text>专业标签</view>
					<view style="padding: 0rpx 20rpx;">
						<view class="multiple">
							<view :class="{active: coachTagsChooseList.indexOf(item.dictKey) >= 0}" v-for="item in coachTagsList"
								:key="item.dictKey" @click="onChoosePlan(item)">
								{{item.dictValue}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="height30"></view>
			<view>
				<view class="form-row">
					<view class="ftitle"><text class="required">*</text>从业时间</view>
					<view  class="fvalue"  @click="serviceYears.show = true" >{{ coachForm.serviceYears || '选择从业时间' }}</view>
				</view>
			</view>
		</view>
		
		<view class="height30 bg-f1f1f1"></view>
		<view class="venueForm">
			<view class="textareaTitle"><text class="required">*</text>个人简介</view>
			<view class="textareaValue">
				<textarea v-model="coachForm.coachIntro" style="height: 200rpx;font-size: 32rpx;" placeholder="请输入个人简介"></textarea>
			</view>
		</view>
		
		
		<view class="height30 bg-f1f1f1"></view>
		<view class="venueForm">
			<view class="textareaTitle"> 从教经验</view>
			<view class="textareaValue">
				<textarea v-model="coachForm.experienceFromTeaching" style="height: 200rpx;font-size: 32rpx;" placeholder="请输入从教经验"></textarea>
			</view>
		</view>
		
		<view class="height30 bg-f1f1f1"></view>
		<view class="venueForm">
			<view>
				<view  class="h-title">教学成果</view>
				<view class="h-desc">教学成果荣誉最多上传9张图，且图片宽高建议750*339px</view>
			</view>
			<view>
				<u-upload name="teachingOutcomesFile" :fileList="teachingOutcomesFileList"  @afterRead="onUpload($event, 'teachingOutcomesFile')"
						@delete="onDelete($event, 'teachingOutcomesFile')"  :maxCount="9"
					width="208rpx" height="208rpx">
				</u-upload>
			</view>
			<view style="border: 1px solid #c3c3c3;padding:20rpx;">
				<textarea v-model="coachForm.teachingOutcomes" style="height: 200rpx;font-size: 32rpx;" placeholder="请输入教学成果"></textarea>
			</view>
		</view>
		
		<view class="height30 bg-f1f1f1"></view>
		<view class="venueForm">
			<view>
				<view class="h-title">所获荣誉</view>
				<view class="h-desc">所获荣誉最多上传9张图，且图片宽高建议750*339px</view>
			</view>
			<view>
				<u-upload name="honorsFile" :fileList="honorsFileList"  @afterRead="onUpload($event, 'honorsFile')"
						@delete="onDelete($event, 'honorsFile')"  :maxCount="9"
					width="208rpx" height="208rpx">
				</u-upload>
			</view>
			<view style="border: 1px solid #c3c3c3;padding:20rpx;">
				<textarea v-model="coachForm.honors" style="height: 200rpx;font-size: 32rpx;" placeholder="请输入所获荣誉"></textarea>
			</view>
		</view>
		
		<view class="height30"></view>
		<view style="padding: 30rpx;">
			<button class="submitBtn" @click="formSubmitBtn">保 存</button>
		</view>
		
		
		
		<!-- 从业 -->
		<u-datetime-picker
				:show="serviceYears.show"
				v-model="serviceYears.value"
				mode="date"
				@confirm="serviceYearsConfirm"
				@cancel = "serviceYears.show = false"
				:minDate="60"
		></u-datetime-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//教练图片
				coachImgList: [],
				//教学成果证书
				teachingOutcomesFileList: [],
				//荣誉证书
				honorsFileList: [],
				//从业时间
				serviceYears: {
					show: false,
					value: '',
				},
				//场馆主注册申请表单
				coachForm: {
					id: '',
					//教练员头像
					coachImg: '',
					//简介
					coachIntro: '',
					//专业专长 speciality_type
					coachTags: '',
					//从业时间
					serviceYears: '',
					//从教经验
					experienceFromTeaching: '',
					//教学成果
					teachingOutcomes: '',
					//教学成果证书
					teachingOutcomesFile: '',
					//所获荣誉
					honors: '',
					//荣誉证书
					honorsFile: ''
				},
				//教练员专业专长
				coachTagsList: [],
				//已选专长
				coachTagsChooseList: []
			}
		},
		onLoad() {
			this.coachTagsDict();
			this.getCoachInfoData();
		},
		methods: {
			//获取当前登录用户信息
			getCoachInfoData(){
				var url = '/blade-merchant-app/merchant-app/coach/getCoachInfo';
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$request({
					url: url,
					type: 'GET'
				}).then(res => {
					uni.hideLoading();
					
					this.coachForm = {
						id: res.data.id,
						//教练员头像
						coachImg: res.data.coachImg,
						//简介
						coachIntro: res.data.coachIntro,
						//专业专长
						coachTags: res.data.coachTags,
						//从业时间
						serviceYears: res.data.serviceYears,
						//从教经验
						experienceFromTeaching: res.data.experienceFromTeaching,
						//教学成果
						teachingOutcomes: res.data.teachingOutcomes,
						//所获荣誉
						honors: res.data.honors
					}
					//已选专业标签
					this.coachTagsChooseList = (res.data.coachTags?res.data.coachTags.split(','):[]);
					//教练图片（1张图）
					this.coachImgList=[{ url: res.data.coachImg }];
					//教学成果多张图片
					var teachingOutcomesFile = res.data.teachingOutcomesFile.split(',');
					var teachingOutcomesFileList = [];
					//处理：split对空值也会生成1个长度
					if(res.data.teachingOutcomesFile.length > 1){
						teachingOutcomesFile.forEach(item => {
							var d = { url: item };
							teachingOutcomesFileList.push(d);
						});
					}
					
					this.teachingOutcomesFileList = teachingOutcomesFileList;
					//所获荣誉多张图片
					var honorsFile = res.data.honorsFile.split(',');
					var honorsFileList = [];
					//处理：split对空值也会生成1个长度
					if(res.data.honorsFile.length > 1){
						honorsFile.forEach(item => {
							var d = { url: item };
							honorsFileList.push(d);
						});
					}
					this.honorsFileList = honorsFileList;
					
					
				})
			},
			//教练员专业字典
			coachTagsDict(){
				return new Promise((resolve, reject) => {
					this.$request({
						url: '/blade-client-business/app/dict/getDictList',
						type: 'GET',
						data: {'code': 'speciality_type'}
					}).then(res => {
						this.coachTagsList = res.data;
						resolve(res.data);
					}).catch(err =>{
						reject(err); 
					})
				})
			},
			// 选择专业标签
			onChoosePlan(record) {
				const index = this.coachTagsChooseList.findIndex(item => item === record.dictKey);
				if (index >= 0) {
					this.coachTagsChooseList.splice(index, 1);
				} else {
					this.coachTagsChooseList.push(record.dictKey);
				}
			},
			//从业时间确认
			serviceYearsConfirm(e) {
				const timeFormat = uni.$u.timeFormat;
				var serviceYears = timeFormat(e.value, 'yyyy-mm-dd');
				this.coachForm.serviceYears = serviceYears;
				this.serviceYears.show = false;
			},
			// 上传文件
			onUpload(files, type) {
				const {
					file
				} = files;
				let index = this[`${type}List`].length;
				this[`${type}List`].push({
					...file,
					status: 'uploading',
					message: '上传中'
				})
				this.$utils.onUploadFile(file.url)
					.then(res => {
						let item = this[`${type}List`][index];
						this[`${type}List`].splice(index, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: res.data.link
						}))
					})
			},
			// 删除图片
			onDelete(e, type) {
				this[`${type}List`].splice(e.index, 1);
			},
			//提交注册申请
			formSubmitBtn(){
				
				if(this.coachImgList.length <= 0){
					uni.$u.toast("请上传您的相片")
					return ;
				}
				if(this.coachTagsChooseList.length <= 0){
					uni.$u.toast("请选择您的专业标签")
					return ;
				}
				
				if(!this.coachForm.serviceYears){
					uni.$u.toast("请选择从业时间")
					return ;
				}
				
				if(!this.coachForm.coachIntro){
					uni.$u.toast("请输入个人简历")
					return ;
				}
				
				let that=this
				uni.showModal({
					title: '提示',
					content: '确认是否修改您的信息？',
					success: function(res) {
						if (res.confirm) {
							that.coachUpdate();
						}
					}
				});
				
			},
			//提交申请
			coachUpdate(){
				const params = this.coachForm;
				params.coachImg = this.coachImgList[0].url;
				params.teachingOutcomesFile = this.teachingOutcomesFileList.map(item => item.url).join(',');
				params.honorsFile = this.honorsFileList.map(item => item.url).join(',');
				params.coachTags = this.coachTagsChooseList.join(',');
				
				uni.showLoading({
					title: '保存中',
					mask: true
				})
				this.$request({
					url: '/blade-merchant-app/merchant-app/coach/update',
					type: 'POST',
					data: params
				}).then(res => {
					uni.hideLoading();
					if (res?.code === 200) {
						
						uni.showModal({
						   title: '修改成功',
						   content: '生涯信息可迭代修改，请您填写您最真实的经历让更多用户认识你',
						   showCancel: false,
						   success: function (res) {
							   if (res.confirm) {
								   uni.navigateBack()
							   }
						   }
						});
						
					} else {
						uni.$u.toast(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
		
		.venueForm {
			padding: 40rpx;
			background-color: #ffffff;
			
			.textareaTitle {
				padding-bottom: 20rpx;font-size: 33rpx;color: #444444;font-weight: 600;line-height: 45rpx;
				
				.required {
					color: red;
				}
			}
			.textareaValue {
				border: 1px solid #c3c3c3;padding:20rpx;
			}
			
			.form-row {
				border-radius: 0rpx;display: flex;border: 1px solid #c3c3c3;justify-content: center;align-items: center; 
				
				.ftitle {
					text-align: center;
					font-size: 30rpx;
					width: 180rpx;
					display: inline-table;
					color: #333333;
					padding:0rpx 10rpx;
					
					.required {
						color: red;
					}
				}
				.fvalue {
					height: 90rpx;width: 100%;font-size: 32rpx;line-height: 90rpx;overflow: hidden;
				}
				
				
				
				.multiple {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					padding: 25rpx 0;
				
					view {
						width: 23%;
						margin-left: 2.666%;
						font-size: 26rpx;
						color: #2979ff;
						line-height: 68rpx;
						text-align: center;
						border-radius: 10rpx;
						background-color: #ecf5ff;
				
						&.active {
							position: relative;
				
							&::after {
								content: "";
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								border: 2rpx solid #2979ff;
								border-radius: 10rpx;
							}
						}
				
						&:nth-child(4n + 1) {
							margin-left: 0;
						}
				
						&:nth-child(n + 5) {
							margin-top: 12rpx;
						}
					}
				}
			
			}
			
		}
		
		.submitBtn {
			height: 90rpx;background-color: #0544ab;color: #ffffff;line-height: 90rpx;font-size: 32rpx;
		}
		
		.height30 {
			height: 30rpx;
		}
		.bg-f1f1f1 {
			background: #f1f1f1;
		}
		.required {
			color: red;
		}
		.h-title {
			font-size: 33rpx;color: #444444;font-weight: 600;line-height: 45rpx;
		}
		.h-desc {
			color: #888888;font-size: 26rpx;line-height: 70rpx;
		}
</style>
